/*
* @Author: wangliang
* @Date: 2018/4/12
* @description: 上市信息
*/
<template>
    <div class="custom-box p-20 m-t-20">
        <el-row>
            <el-col :span="5" class="ca-title">
                <h3>上市信息 ({{totalCount}})</h3>
                <button type="button" 
                    class="custom-btn custom-btn-round m-l-15"
                    @click="add()">
                    <i class="fa fa-plus"></i>
                </button>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="data"
            stripe
            style="width: 100%">
            <el-table-column
                label="ID"
                prop="id"
                align="center">
            </el-table-column>
            <el-table-column
                label="交易所"
                prop="exchangeId"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.exchangeId | getNameById('exchangeType')}}
                </template>
            </el-table-column>
            <el-table-column
                label="股票代码"
                prop="stockCode"
                align="center">
            </el-table-column>
            <el-table-column
                label="是否显示"
                prop="exhibition"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.exhibition == '1' ? '展示' : '不展示'}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button  type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button  type="text" @click="deleteId(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="m-t-20" >
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page="pageParam.pageIndex"
                :page-size="10"
                :total="totalCount">
            </el-pagination>
        </div>
        <!-- 上市信息编辑 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :show-close="false" width="35%">
            <el-form :model="comIpoDto" ref="IpoForm" :rules="rules">
                <el-form-item label="交易所" label-width="90px" prop="exchangeId">
                    <el-select v-model="comIpoDto.exchangeId" placeholder="请选择" style="width:100%">
                        <el-option
                        v-for="(item, index) in exchangeType"
                        :key="index"
                        :label="item.dictName"
                        :value="item.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="股票代码" label-width="90px" prop="stockCode">
                    <el-input v-model="comIpoDto.stockCode"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" label-width="90px">
                    <el-select v-model="comIpoDto.exhibition" placeholder="请选择" style="width:100%">
                        <el-option
                        v-for="(item, index) in whether"
                        :key="index"
                        :label="item.dictName"
                        :value="Number(item.dictValue)"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="primary" round @click="save()">保存</el-button>
                <el-button round @click="close()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import ListedService from '../../../../../service/subject/company/listed-info/index';
import { ComIpoDto, PageParam } from '../../../../../api/Interface';
@Component({
    components: { }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    // public msg: number = 123;
    public comIpoDto: ComIpoDto = {} as ComIpoDto; // <PersonVo> {}
    public pageParam: PageParam = {pageIndex: 1, pageSize: 10} as PageParam; // <PersonVo> {}
    public dialogTitle: string = '添加上市信息';
    public status: string = '添加';
    public totalCount: number = 0;
    public valueTime: string = '';
    public inputValue: string = '';
    public checkList: string[] = [];
    public data: object[] = [];
    public whether: object[] = this.$store.state.user.dictionary.dicList.whether; // 是否
    public exchangeType: object[] = this.$store.state.user.dictionary.dicList.exchangeType; // 交易所
    public total: number = 0;
    public dialogVisible: boolean = false;
    public innerVisible: boolean = false;
    public rules = {
        exchangeId: [ { required: true, message: '请选择交易所', trigger: 'change' } ],
        stockCode: [ { required: true, message: '请输入股票代码', trigger: 'blur' } ],
    };
    // refs
    public $refs: {
        IpoForm: HTMLFormElement
    };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }

    // 声明周期钩子
    public mounted() {
        this.getList();
    }

    // 方法
    // 添加
    public add() {
        this.dialogVisible = true;
        this.dialogTitle = '添加上市信息';
        this.status = '添加';
        this.comIpoDto = {} as ComIpoDto;
    }
    // 编辑
    public edit(info: ComIpoDto) {
        this.dialogVisible = true;
        this.comIpoDto = info;
        this.dialogTitle = '编辑上市信息';
        this.status = '编辑';
    }
    // 更改页码
    public handleCurrentChange(val: number) {
        this.pageParam.pageIndex = val;
        this.getList();
    }
    // 保存
    public save() {
        this.$refs.IpoForm.validate( async ( valid: boolean) => {
            if (valid) {
                this.comIpoDto.companyId = Number(this.$route.params.itemId);
                if (this.status === '添加') {
                    const res = await ListedService.saveComIpo(this.comIpoDto);
                    if (res.resCode === '0') {
                        this.$message.success('添加成功');
                        this.dialogVisible = false;
                        this.getList();
                    }
                } else if (this.status === '编辑') {
                    const res = await ListedService.updateComIpo(this.comIpoDto);
                    if (res.resCode === '0') {
                        this.$message.success('修改成功');
                        this.dialogVisible = false;
                        this.getList();
                    }
                }
            }
        });
    }
    // 取消
    public close() {
        this.dialogVisible = false;
        this.getList();
        this.$refs.IpoForm.resetFields();
    }
    // 获取上市信息列表
    public async getList() {
        const query = {
            'pageParam.pageIndex': this.pageParam.pageIndex,
            'pageParam.pageSize': this.pageParam.pageSize,
            companyId: Number(this.$route.params.itemId),
        };
        const res = await ListedService.getComIpoByCompanyId(query);
        if (res.resCode === '0') {
            this.data = res.data.resultData;
            this.totalCount = res.data.totalCount;
        }
    }
    // 删除联系方式
    public deleteId(delId: number) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const res = await ListedService.deleteComIpoById(delId);
            if (res.resCode === '0') {
                this.$message.success('删除成功');
                this.getList();
            }
        }).catch(() => {
            return false;         
        });
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 22px;
    margin-top: 12px;
    margin-left: 10px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
</style>